<template>
  <div class="app-head">
    <div class="app-head-inner">
      <router-link to="/">
        <img src="/static/images/logo.png">
      </router-link>
      <div class="head-nav">
        <ul class="nav-list">
          <li> {{ username }}</li>
          <li class="nav-pile" v-if="username !== ''">|</li>
          <router-link tag="li" to="/" @click="logClose" v-if="username !== ''">退出</router-link>
          <li @click="logClick" v-if="username === ''">登录</li>
          <li class="nav-pile" v-if="username === ''" >|</li>
          <li @click="regClick" v-if="username === ''">注册</li>
          <li  class="nav-pile">|</li>
          <li @click="aboutClick" >关于</li>
        </ul>
      </div>
    </div>
    <header-dialog
      :style="{position: s1, zIndex: s2}"
      :show="isShowAboutDialog"
      @on-close="closeDialog('isShowAboutDialog')"
    >
      <p>本报告在调研数据的基础上，采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等，通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、准确地反映中国专车市场发展情况，为政府、企事业单位和社会各界提供决策依据。 </p>
    </header-dialog>
    <header-dialog
      :style="{position: s1, zIndex: s2}"
      :show="isShowRegDialog"
      @on-close="closeDialog('isShowRegDialog')"
    >
      <header-reg-form></header-reg-form>
    </header-dialog>
    <header-dialog
      :style="{position: s1, zIndex: s2}"
      :show="isShowLogDialog"
      @on-close="closeDialog('isShowLogDialog')"
    >
      <header-log-form  @has-log="onSuccessLog"></header-log-form>
    </header-dialog>
  </div>
</template>

<script>
import HeaderDialog from './item/Dialog'
import HeaderRegForm from './item/RegForm'
import HeaderLogForm from './item/LogForm'
import axios from 'axios'
export default {
  name: 'HomeHeader',
  components: {
    HeaderDialog,
    HeaderRegForm,
    HeaderLogForm
  },
  data () {
    return {
      s1: 'fixed',
      s2: 9999,
      username: '',
      isShowAboutDialog: false,
      isShowRegDialog: false,
      isShowLogDialog: false,
      sShow: false
    }
  },
  methods: {
    aboutClick () {
      this.isShowAboutDialog = true
    },
    regClick () {
      this.isShowRegDialog = true
    },
    logClick () {
      this.isShowLogDialog = true
    },
    logClose () {
      axios.get('/app/login')
        .then(this.handleGetHomeInfo)
    },
    handleGetHomeInfo (res) {
      alert(111)
    },
    closeDialog (attr) {
      this[attr] = false
    },
    onSuccessLog (res) {
      this.username = res.username
      this.closeDialog('isShowLogDialog')
      // this.isShowLogDialog = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .styl{
    position fixed!important
    z-index 9999!important
  }
  .app-head {
    background: #363636;
    color: #b2b2b2;
    height: 90px;
    line-height: 90px;
    width: 100%;
  }
  .app-head-inner {
    width: 1200px;
    margin: 0 auto;
  }
  .head-logo {
    float: left;
  }
  .app-head-inner img {
    width: 50px;
    margin-top: 20px;
  }
  .head-nav {
    float: right;
  }
  .head-nav ul {
    overflow: hidden;
  }
  .head-nav li {
    cursor: pointer;
    float: left;
  }
  .nav-pile {
    padding: 0 10px;
  }
</style>
